import profileView from '../views/profile.art'

class profile{

    //模拟发送验证码的倒计时
    aaa(){
        let that = this
        let len = 11
        let time
        $('.mobile-login .kk button').off()
        $('.mobile-login .nimasile input').removeAttr('disabled')
        let html = len +'s'
        time = setInterval(function(){
            html = parseFloat(html)-1+'s'
            $('.mobile-login .kk button').html(html)
            if(html == '0s'){
                clearInterval(time)
                $('.mobile-login .kk button').html('发送验证码')
            }
        }, 1000);
    }
    //输入内容提示框消失
    disapper(){
        $('.info').css('display','none')
        $('.info2').css('display','none')
    }
    //模拟登录成功跳转首页面
    change(){
        location.hash = 'movie'
    }
    render(){
        let that = this
        let html = profileView()
        $('main').html(html)

        $('.mobile-login input:nth-child(1)').attr('maxlength',11) //限制手机号位数
        $('.mobile-login .kk button').attr('disabled','true')  //起始的发送验证码按钮不可点

        $('ul li:nth-child(1)').on('tap',function(){
            //样式 显示隐藏 动态条条 背景 颜色
            $('.account-login').css('display','block')
            $('.mobile-login').css('display','none')
            $('.slide').css('left','20px')
            $('.btn button').css('background','#df2d2d')
            $('.btn button').css('color','#fff')
        })
        $('ul li:nth-child(2)').on('tap',function(){
            $('.account-login').css('display','none')
            $('.mobile-login').css('display','block')
            $('.slide').css('left','50%')
            $('.btn button').css('background','#dcdcdc')
            $('.btn button').css('color','#999')
        })
        //  验证手机号码的正则表达式 /^1[3456789]\d{9}$/
        //  验证用户名的正则表达式  /^[a-zA-Z][a-zA-Z0-9_]{5}$/
        //  验证邮箱的正则表达式  /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
        let reg1 =/^1[3456789]\d{9}$/
        let reg2 =/^[a-zA-Z][a-zA-Z0-9_]{5}$/
        let reg3 =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/

        $('.btn button').on('tap',function(){
            let value=$('.account-login input:nth-child(1)').val()
            let pswd =$('.account-login input:nth-child(4)').val()
            let r1 = reg1.test(value)
            let r2 = reg2.test(value)
            let r3 = reg3.test(value)

            if(!value && !pswd){
                $('.account-login input:nth-child(1)').focus()
                $('.info').css('display','block')
            }
            else if(!value && pswd){
                $('.account-login input:nth-child(1)').focus()
                $('.info').css('display','block')
            }
            else if(value && !pswd){
                $('.account-login input:nth-child(3)').focus()
                $('.info2').css('display','block')
            }
            else if(value == JSON.parse(window.localStorage.getItem('user')).num && pswd == JSON.parse(window.localStorage.getItem('user')).psw && value && pswd){
                location.hash = 'movie'
            }
            else{
                $('.foundpswd').css('display','block')
            }
        })
        //输入内容提示框消失
        $('input').on('input',that.disapper)

        //手机验证登录  手机号的验证
        $('.mobile-login input:nth-child(1)').on('input',function(){
            let mobile=$('.mobile-login input:nth-child(1)').val()
            let r4 = reg1.test(mobile)
            if(r4){
                $('.kk button').css('color','#df2d2d')
                $('.kk button').css('border','1px solid red;')
                $('.kk button').css('background','#fff')
                $('.btn button').css('background','#df2d2d')
                $('.btn button').css('color','#fff')
                $('.mobile-login .kk button').on('tap',that.aaa)
            }
        })

        $('.register').on('tap',function(){
            location.hash = 'register'
        })
    }
}

export default new profile()